<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入echarts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>

<div id="event_test" style="width: 800px;height: 500px"></div>

<script>
    let eventContainer = document.getElementById('event_test');
    let eventChart = echarts.init(eventContainer)

    let eventOption = {
        backgroundColor: '#080b30',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            confine: true
        },
        xAxis: [{
            type: 'category',
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)'
                }
            },
            data: ['2021-6-7', '2021-6-8', '2021-6-9', '2021-6-10', '2021-6-11', '2021-6-12'],
        }],

        yAxis: [{
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)'
                }
            },
        }],

        series: {
            name: '注册总量',
            type: 'line',
            smooth: true, //是否平滑
            /* showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: 'circle',
            symbolSize: 25,
            */
            lineStyle: {
                normal: {
                    color: "#6c50f3",
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 5,
                    shadowOffsetX: 5,
                },
            },
            label: {
                show: true,
                position: 'top',
                textStyle: {
                    color: '#6c50f3',
                }
            },
            itemStyle: {
                color: "#6c50f3",
                borderColor: "#fff",
                borderWidth: 3,
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
            },
            tooltip: {
                show: false
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(74,145,247,0.5)'
                    },
                        {
                            offset: 1,
                            color: 'rgba(74,145,247,0.01)'
                        }
                    ], false),
                }
            },
            data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02,]
        }
    };

    let time = ""

    //点击x轴线
    eventChart.getZr().on('click', params => {
        const pointInPixel = [params.offsetX, params.offsetY]
        if (eventChart.containPixel('grid', pointInPixel)) {
            const xIndex = eventChart.convertFromPixel({seriesIndex: 0}, [params.offsetX, params.offsetY])[0]
            time = eventOption.xAxis[0].data[xIndex]
            eventChart.resize();
            // TODO：这里要把时间返回去
            console.log(time)
        }
    })

    //点击x轴坐标
    eventChart.on('click', 'xAxis.category', function (params, node) {
        time = params.value
        eventChart.resize();
        console.log(time)
    });

    eventChart.setOption(eventOption);
</script>

</body>
</html>